<template>
  <a-form v-bind="dynamicValidateForm.formItemLayout">
    <a-form-item
      v-for="(formItem, index) in dynamicValidateForm.formItem.filter(item => !item.hidden)"
      :key="formItem.key"
      :help="formItem.help"
      :extra="formItem.extra"
      v-bind="validateInfos[formItem.key]"
      :label="formItem.label"
    >
      <!--      自定义组件-->
      <component
        v-model:value="modelRef[formItem.key]"
        :is="formItem.component"
        v-if="formItem.type == 'component'"
      />
      <a-tooltip placement="top">
        <template v-if="isString(formItem.tips)" v-slot:title>
          <span>{{ formItem.tips }}</span>
        </template>
        <!--        普通输入框 start-->
        <a-input
          v-if="formItem.type == 'input'"
          v-model:value="modelRef[formItem.key]"
          v-bind="formItem.props"
          :disabled="formItem?.props?.disabled"
        />
        <!--        普通输入框 end-->
        <!--        数字输入框 start-->
        <a-input-number
          v-if="formItem.type == 'inputNumber'"
          v-model:value="modelRef[formItem.key]"
          v-bind="formItem.props"
          style="width: auto"
        />
        <!--        数字输入框 end-->
      </a-tooltip>
      <!--      开关选择器start-->
      <a-switch
        v-if="formItem.type == 'switch'"
        v-model:checked="modelRef[formItem.key]"
        v-bind="formItem.props"
      />
      <!--      开关选择器end-->
      <!--        下拉选择器 start-->
      <template v-if="formItem.type == 'select'">
        <a-select v-model:value="modelRef[formItem.key]">
          <a-select-option
            v-for="option in formItem.options"
            :value="option.value"
            :key="option.value"
          >
            {{ option.label }}
          </a-select-option>
        </a-select>
      </template>
      <!--        下拉选择器 end-->
      <!--        单选框 start-->
      <template v-if="formItem.type == 'radio'">
        <a-radio-group v-model:value="modelRef[formItem.key]">
          <a-radio v-for="option in formItem.options" :value="option.value" :key="option.value">
            {{ option.label }}
          </a-radio>
        </a-radio-group>
      </template>
      <!--        单选框 end-->
      <!--      字符范围 start-->
      <template v-if="formItem.type == 'inputRange'">
        <a-input-group compact>
          <a-tooltip
            :visible="'error' === validateInfos[formItem.variable.start]?.validateStatus"
            :title="validateInfos[formItem.variable.start]?.help"
          >
            <a-input
              v-model:value="modelRef[formItem.variable.start]"
              style=" text-align: center"
              :placeholder="formItem.placeholder?.start || '起始值'"
            />
          </a-tooltip>
          <a-input
            style=" width: 30px; pointer-events: none; backgroundColor: #fff"
            placeholder="~"
            disabled
          />
          <a-tooltip
            :visible="'error' === validateInfos[formItem.variable.end]?.validateStatus"
            :title="validateInfos[formItem.variable.end]?.help"
          >
            <a-input
              v-model:value="modelRef[formItem.variable.end]"
              style="text-align: center"
              :placeholder="formItem.placeholder?.end || '结束值'"
            />
          </a-tooltip>
        </a-input-group>
      </template>
      <!--      字符范围 end-->
      <!--      数值范围 start-->
      <template v-if="formItem.type == 'inputNumRange'">
        <a-input-group compact>
          <a-tooltip
            :visible="'error' === validateInfos[formItem.variable.start]?.validateStatus"
            :title="validateInfos[formItem.variable.start]?.help"
          >
            <a-input-number
              v-model:value="modelRef[formItem.variable.start]"
              style="width: auto"
              :placeholder="formItem.placeholder?.start || '起始值'"
            />
          </a-tooltip>
          <a-input
            style=" width: 30px; pointer-events: none; backgroundColor: #fff"
            placeholder="~"
            disabled
          />
          <a-tooltip
            :visible="'error' === validateInfos[formItem.variable.end]?.validateStatus"
            :title="validateInfos[formItem.variable.end]?.help"
          >
            <a-input-number
              v-model:value="modelRef[formItem.variable.end]"
              style="width: auto"
              :placeholder="formItem.placeholder?.end || '结束值'"
            />
          </a-tooltip>
        </a-input-group>
      </template>
      <!--      数值范围 end-->
    </a-form-item>
  </a-form>
</template>

<script lang="ts">
import { defineComponent, reactive, watch } from 'vue'
import components from '@/components/dynamic-form/components'
import { useForm } from '@ant-design-vue/use'
import { isString } from '@/utils/is'

export default defineComponent({
  name: 'dynamic-form',
  components,
  props: {
    dynamicValidateForm: {
      // 动态验证表单
      required: true,
      type: [Object]
    } as any,
    fields: {
      // 预置字段默认值
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    // 表单布局
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 }
    }

    // 表单项
    const modelRef = reactive(
      props.dynamicValidateForm.formItem.reduce((previousValue, currentValue) => {
        previousValue[currentValue.key] = currentValue.value
        return previousValue
      }, {})
    )
    // 如果有默认值，则覆盖
    props.fields && Object.assign(modelRef, props.fields)

    const isRange = type => {
      return 'inputRange' == type || 'inputNumRange' == type
    }

    // 表单验证规则
    const rulesRef = reactive(
      props.dynamicValidateForm.formItem.reduce((previousValue, currentValue) => {
        if (isRange(currentValue.type)) {
          currentValue.rules &&
            (previousValue[currentValue.variable.start] = previousValue[currentValue.variable.end] =
              currentValue.rules)
        } else {
          currentValue.rules && (previousValue[currentValue.key] = currentValue.rules)
        }
        return previousValue
      }, {})
    )

    console.log(modelRef, '表单')

    console.log(rulesRef, '表单验证规则')

    const watchCallback = props.dynamicValidateForm.watchCallback ?? (() => ({}))

    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef)

    // 是否有需要监测的字段
    props.dynamicValidateForm.watchKeys &&
      watch(
        props.dynamicValidateForm.watchKeys.map(item => () => modelRef[item]),
        (curr, prev) =>
          watchCallback(curr, {
            dynamicForm: props.dynamicValidateForm,
            modelRef,
            validateInfos: validateInfos
          })
      )
    // watch(props.dynamicValidateForm.watchKeys.map(item => () => modelRef[item]), eval(props.dynamicValidateForm.watchCallback))

    const sss = () => {
      console.log('ddd')
    }

    return {
      formItemLayout,
      validate,
      isString,
      sss,
      isRange,
      validateInfos,
      modelRef
    }
  }
})
</script>

<style lang="scss" scoped>
.ant-form {
  .ant-input-group {
    display: flex;
  }
}
</style>
